<template>
  <!-- 通讯录 -->
  <div class="container">
    <van-collapse v-model="activeNames">
      <van-collapse-item v-for="(item,index) in list" :key="item.id" :title="item.name" :name="index">
        <div class="list">
          <div v-for="user in item.users" :key="user.id" class="item">
            <img class="headimg" :src="item.avatar|imgPath" alt="" srcset="">
            <div class="info">
              <div class="title">
                <span class="name">{{user.username}}</span>
                <span>{{item.name}}</span>
              </div>
              <div class="tel">{{user.mobilePhone}}</div>
            </div>
            <a :href="`tel:${user.mobilePhone}`">
              <img class="handler" src="../../assets/img/my/icon-tel.png" alt="" srcset="">
            </a>
            <img
              @click="onSendMessage(user.mobilePhone)"
              class="handler"
              src="../../assets/img/my/icon-msg.png"
              alt=""
              srcset=""
            >
          </div>
        </div>
      </van-collapse-item>
      <!-- <van-collapse-item title="第二支部" name="2">
        <div class="list">
          <div v-for="item in 4" class="item">
            <img class="headimg" src="../../assets/img/my/headimg.png" alt="" srcset="">
            <div class="info">
              <div class="title">
                <span class="name">周水斌</span>
                <span>体验支部</span>
              </div>
              <div class="tel">15638830111</div>
            </div>
            <img class="handler" src="../../assets/img/my/icon-tel.png" alt="" srcset="">
            <img class="handler" src="../../assets/img/my/icon-msg.png" alt="" srcset="">
          </div>
        </div>
      </van-collapse-item>
      <van-collapse-item title="第三支部" name="3">
        <div class="list">
          <div v-for="item in 4" class="item">
            <img class="headimg" src="../../assets/img/my/headimg.png" alt="" srcset="">
            <div class="info">
              <div class="title">
                <span class="name">周水斌</span>
                <span>体验支部</span>
              </div>
              <div class="tel">15638830111</div>
            </div>
            <img class="handler" src="../../assets/img/my/icon-tel.png" alt="" srcset="">
            <img class="handler" src="../../assets/img/my/icon-msg.png" alt="" srcset="">
          </div>
        </div>
      </van-collapse-item>
      <van-collapse-item title="第四支部" name="4">
        <div class="list">
          <div v-for="item in 4" class="item">
            <img class="headimg" src="../../assets/img/my/headimg.png" alt="" srcset="">
            <div class="info">
              <div class="title">
                <span class="name">周水斌</span>
                <span>体验支部</span>
              </div>
              <div class="tel">15638830111</div>
            </div>
            <img class="handler" src="../../assets/img/my/icon-tel.png" alt="" srcset="">
            <img class="handler" src="../../assets/img/my/icon-msg.png" alt="" srcset="">
          </div>
        </div>
      </van-collapse-item>
      <van-collapse-item title="第五支部" name="5">
        <div class="list">
          <div v-for="item in 4" class="item">
            <img class="headimg" src="../../assets/img/my/headimg.png" alt="" srcset="">
            <div class="info">
              <div class="title">
                <span class="name">周水斌</span>
                <span>体验支部</span>
              </div>
              <div class="tel">15638830111</div>
            </div>
            <img class="handler" src="../../assets/img/my/icon-tel.png" alt="" srcset="">
            <img class="handler" src="../../assets/img/my/icon-msg.png" alt="" srcset="">
          </div>
        </div>
      </van-collapse-item> -->
    </van-collapse>
  </div>
</template>
<script>
export default {
  data () {
    const u = navigator.userAgent
    return {
      u,
      list: [],
      activeNames: [1]
    }
  },
  created () {
    this.getList()
  },
  methods: {
    onSendMessage (phoneNumber) {
      try {
        if (this.u.indexOf('Android') > -1 || this.u.indexOf('Linux') > -1) {
          // 安卓手机
          android.sendMessage(phoneNumber)
        }
      } catch (error) {
        console.log(error)
      }
    },
    getList () {
      this.$axios.get('/xbkj-dj/web/user/getUserDept').then(res => {
        if (res.code === 0) {
          let { deptList, userList } = res
          let userObj = {}
          userList.forEach(item => {
            if (userObj[item.deptId]) {
              userObj[item.deptId].push(item)
            } else {
              userObj[item.deptId] = [item]
            }
          })
          deptList.map(item => {
            item.users = userObj[item.id] || []
            return item
          })
          this.list = deptList
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.list {
  img {
    display: block;
  }
  .item {
    display: flex;
    align-items: center;
    margin: 20px 0;
    .headimg {
      flex: 0 0 60px;
      width: 60px;
      height: 50px;
      border-radius: 6px;
    }
    .info {
      flex: 1;
      color: #999;
      margin-left: 10px;
      > div {
        height: 25px;
        line-height: 25px;
      }
      .name {
        font-size: 16px;
        color: #333;
        font-weight: bold;
      }
    }
    .handler {
      flex: 0 0 36px;
      width: 36px;
      height: 36px;
      margin-left: 20px;
    }
  }
}
</style>
